BinAST

or

Brisons le mur du chargement JS !

David Teller (Yoric), Mozilla, Tech Lead

Un projet

Mozilla
Facebook
Bloomberg
CloudFlare

Sur le web, la vitesse compte

DoubleClick : sur mobile, si le chargmenet dure 3+ secondes, 53% des visites sont abandonnées
Addy Osmani : en médiane, le TTI dure 8 secondes sur fixe, 16 secondes sur mobile

Quel est le problème?

Du code.
Beaucoup de code.
Et vous, vous avez combien de code ?
Le code vous ralentit.
… même si vous ne l’utilisez pas !

Parsing

Comment JavaScript démarre

On met du code…

En optimisant…

Et le code natif ?

Parlons de BinAST

JavaScript
Binary
Abstract
Syntax
Tree

Pas de panique !

Parsons plus vite

Au-delà de IIFE

Le parseur est lent…

Les Tokens, c’est compliqué.
Les Chaînes de caractères, c’est compliqué.
Les clôtures, c’est compliqué.
eval.
SyntaxError.

Du coup…

Simplifions les Tokens et les Chaînes.
Gérons eval, SyntaxError, les clôtures en amont.

Au lieu de ça

function foo(x) {
  // Pas d'`eval`.
}

Enregistrons ça

Names:
  - ["foo", ...]

FunctionDeclaration: // 42
  name: 0            // 0
  eval: false        // 0
  body:              // ...
    ...

Résultat

Parser + analyse statique: durée -30%.
C’est pas fini :)

Téléchargeons plus vite

Au-delà de la minification

const log = require('my-logger')('my-module');
const {parse, print} = require('my-parser');
// ...
if (Constants.DEBUG) {
  // ...
}

Les chaînes, les noms… se répètent.
Des répétitions entre bibliothèques.
Le code a des motifs !

Du coup, apprenons…

Dictionnaires de chaînes, noms…
Dictionnaires de code.
Un dictionnaire par site web.
=> ~1.2 bits/nœud.
=> ~2-6 bits/chaîne, nom…

Résultat

Avec un bon dictionnaire, ~minification + brotli.
Sans minification.
C’est pas fini :)

Compilons plus vite

Au lieu de ça…

function init() {
  // Exécuté tout de suite
  // ...
  button.addEventListener("click",
    function later() {
      // Exécuté plus tard
    });
}

…enregistrons ça

// Paquet #1
function init() {
  // ...
  button.addEventListener("click", $later);
}

// Paquet #N
function $later() {
  // ...
}

…du coup

…ne {parsons, compilons} que ce dont nous avons besoin.
…{parsons, compilons, exécutons} avant d’avoir reçu tout le fichier.
Oui, nous parlons bien de streaming de JavaScript.

Résultats (labo)

Parser: durée -75% (*).
Compiler: ~se fait en parallèle (*).

(*) À confirmer.

Conclusions

Résultats

Le démarrage du JavaScript est un goulot d’étranglement.
Nous pouvons le résoudre !
Sans changer le code.
Sans changer le langage.
Moins de travail pour l’ordinateur !

Montrez-moi le code !

WIP.
https://github.com/binast
Firefox Nightly (caché derrière une préférence)
Slides: https://yoric.github.io/Numendo-2019
Bientôt sur un navigateur & et un serveur près de chez vous :)

Contributeurs bienvenus !

https://github.com/binast